<template>
  <div>
    <a-button type="dashed" @click="showModal" style="margin-left:10px">添加用户</a-button>
    <div>
      <a-modal
        v-model="visible"
        title="添加用户"
        @ok="handleOk()"
        :ok-button-props="{ props: { disabled: true } }"
        :cancel-button-props="{ props: { disabled: true } }"
      >
        <a-form-model ref="ruleForm" :model="ruleForm" v-bind="layout">
          <a-form-model-item has-feedback label="角色权限" prop="pass">
            <el-select v-model="ruleForm.pass" placeholder="请选择">
              <!-- <el-option-group
                v-for="(group,index) in options"
                :key="index"
                :label="group.roleName"
              > -->
                <el-option v-for="item in options" :key="item.roleId" :label="item.roleName" :value="item.roleId"></el-option>
              <!-- </el-option-group> -->
            </el-select>
          </a-form-model-item>
          <a-form-model-item has-feedback label="用户邮箱" prop="userName">
            <a-input v-model="ruleForm.userName" type="userName" autocomplete="off" />
          </a-form-model-item>
          <a-form-model-item has-feedback label="用户别名" prop="alias">
            <a-input v-model="ruleForm.alias" type="alias" autocomplete="off" />
          </a-form-model-item>
          <!-- <a-form-model-item has-feedback label="用户密码" prop="password">
            <a-input v-model.number="ruleForm.password" />
          </a-form-model-item>
          <a-form-model-item has-feedback label="再次输入密码" prop="age">
            <a-input v-model.number="age" />
          </a-form-model-item> -->
          <a-form-model-item has-feedback label="状态码" prop="status">
          <el-tooltip :content="'启用or禁用'" placement="top">
            <el-switch
              v-model="ruleForm.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0">
            </el-switch>
          </el-tooltip>
            <!-- <a-input v-model.number="ruleForm.status" /> -->
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click="submitForm(ruleForm)">提交</a-button>
            <a-button style="margin-left: 10px" @click="resetForm('ruleForm')">重置</a-button>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </div>
</template>

<script>
import UserorRoleget from "../api/UserorRole";
// import UserorRole from "../Mockjs/UserorRole/UserorRole";
export default {
  data() {
    return {
      visible: false,
      ruleForm: {
        // pass: "",
        alias:'',
        status:0,
        userName: "",
        password: "123456",
      },
      age:'123456',
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 }
      },
      options: []
    };
  },
  created() {
    this.ZhuCheUser(); 
  },
  methods: {
    ZhuCheUser() {
      UserorRoleget.Rolegetjiao().then(res => {
        if(res.data.code === 20000){
          this.options = res.data.list.list
          console.log(this.options)
        }else if(res.data.code === 401){
          localStorage.clear()
        }
      });
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
    // 注册&&检查邮箱
    submitForm(formName) {
      console.log(formName);
      if(this.checkEmail(formName.userName)){
        if(formName.password == this.age){
          this.zhuchequeding(formName)
        }else{
          alert("两次密码不一致")
        }
      }else{
        alert("邮箱格式错误")
      }
    },
    // 确定
    zhuchequeding(userInfo){
      // UserorRole.Jzhuche()
      console.log(userInfo)
      UserorRoleget.Roleuserzhuche(userInfo).then(res=>{
        if(res.data.code === 20000){
          alert(res.data.msg)
          // location.reload();
          // this.dataget();
          this.$parent.dataget()
          this.visible = false;
          this.ruleForm = {
              alias:'',
              status:0,
              userName: "",
              password: "123456",
          }
        }else if(res.data.code === 500){
          alert(res.data.msg)
        }
      })
    },
    checkEmail(myemail) {
      // var myReg = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;
      // if (myReg.test(myemail)) {
      //   return true;
      // } else {
      //   return false;
      // }
      console.log(myemail)
      return true;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>